<!-- 
      sendComment.html
      发布评论  id= sendComment
      Created by tang on 2017-03-15.
      Copyright 2017 tang. All rights reserved.
 -->

<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link href="../css/mui.min.css" rel="stylesheet" />
	<link rel="stylesheet" href="../css/sendComment.css" media="all" />
</head>

<body class="gray">
	
	<div class="mui-content mui-scroll-wrapper" style="padding-bottom: 40px;">
		 <div class="mui-scroll loading" id="vueMain">
	   <ul class="mui-table-view" style="margin-top: 0;">
	       <li class="mui-table-view-cell mui-media">
	           <a href="javascript:;">
	               <img class="mui-media-object mui-pull-left" :src="img" />
	               <div class="mui-media-body">
	                  	商品评分
	                  	<div class="score red mui-clearfix">
							<div class="score_star mui-pull-left" data-name="score" :data-cover="list.score">
							</div>
						</div>
	               </div>
	           </a>
	       </li>
	   </ul>
	   
	   <div class="text">
	   		<textarea id="txtara" v-model="list.content" placeholder="写下购买体会和使用感受来帮助其他小伙伴"></textarea>
	   		<p style="text-align: right;" class="txt">{{txt}}</p>
	   </div>
	   
	   <div class="mui-row" id="shee">
	   		<div class="mui-col-xs-3 mui-col-sm-3 shee">
	   			<div><img src="../icon/camera@2x.png" alt="" /></div>
	   		</div>
	   		<template v-for="(item,index) in showimg">
	   			<div class="mui-col-xs-3 mui-col-sm-3">
	   				<span :data-idx="index" class="rmimg"></span>
	   				<div><img :src="item" /></div>
	   			</div>
	   		</template>
	   </div>
	   <div class="check">
	   		<div class="mui-input-row mui-checkbox mui-left">
	   		    <label>匿名评价</label>
	   		    <input name="Checkbox" type="checkbox" v-bind:checked="list.is_name==1?true:false" />
	   		</div>
	   </div>
	   <div class="grade">
	   		<div class="grade-title mui-clearfix">
	   			<div class="mui-pull-right">满意请给5星哦</div>
	   			租赁服务评价 
	   		</div>
	   		<div class="grade-content">
	   			<div class="mui-clearfix">
	   				<span class="mui-pull-left">送货速度</span>
	   				<div class="score red mui-clearfix mui-pull-left">
						<div class="score_star mui-pull-left"  data-name="send_score" :data-cover="list.send_score">
						</div>
					</div>
	   			</div>
	   			<div class="mui-clearfix">
	   				<span class="mui-pull-left">服务态度</span>
	   				<div class="score red mui-clearfix mui-pull-left" >
						<div class="score_star mui-pull-left" data-name="service_score" :data-cover="list.service_score">
						</div>
					</div>
	   			</div>
	   			<div class="mui-clearfix">
	   				<span class="mui-pull-left">专业程度</span>
	   				<div class="score red mui-clearfix mui-pull-left">
						<div class="score_star mui-pull-left" data-name="specialty_score" :data-cover="list.specialty_score">
						</div> 
					</div>
	   			</div>
	   		</div>
	   </div>
	   
	   <div class="mui-content-padded" style="margin-top: 20px;">
		   		<button type="button" class="bexta-btn bexta-btn-red mui-btn mui-btn-block enter">确定</button>
		   </div>
	   
	  </div>
	</div>
<div id="sheet1" class="mui-popover mui-popover-bottom mui-popover-action ">
    <!-- 可选择菜单 -->
    <ul class="mui-table-view">
      <li class="mui-table-view-cell">
        <a href="#" class="callCamera">照相机</a>
      </li>
      <li class="mui-table-view-cell">
        <a href="#" class="callalbum">相册</a>
      </li>
    </ul>
    <!-- 取消菜单 -->
    <ul class="mui-table-view">
      <li class="mui-table-view-cell">
        <a href="#sheet1"><b>取消</b></a>
      </li>
    </ul>
</div>
<script src="../js/mui.js"></script>
<script src="../js/vue.min.js"></script>
<script src="../js/mui.extend.js"></script>
<script src="../js/bexta.js"></script>
<script type="text/javascript">
	var apps , views, user;
	mui.init();
	mui.plusReady(function () {
	    views = bexta.getWebview();
	    user = bexta.getStorage(USER);
	    apps = new Vue({
	    		el:"#vueMain",
	    		data:{
	    			img:views.img,
	    			showimg:[],
	    			txt:500,
	    			list:{
	    				uid:user.uid,
	    				order_no:views.order_no,
	    				score:0,   //商品评分
		    			send_score:0,  //  送货速度
		    			service_score:0,  //服务态度
		    			specialty_score:0, //专业程度
		    			content:'',   //使用感受
		    			is_name:2 , //是否若名
		    			photo:[]
	    			}
	    			
	    		},
	    		mounted:function(){
	    			document.querySelector('.loading').classList.add('loadRun');
	    			mui('.mui-scroll-wrapper').scroll({});
	    			
	    			document.querySelector('#txtara').addEventListener('keypress', function(){
	    				if( apps.list.content.length > 499 ){
	    					apps.list.content = apps.list.content.substr(0, 50);
	    				}else{
	    					apps.txt = 499- apps.list.content.length;
	    				}

	    			});
	    			//删除
	    			mui('#vueMain').on('tap', '.rmimg', function(){
	    				var idx = this.getAttribute('data-idx');
	    				if( idx != '' ){
	    					apps.showimg.splice(idx,1);
						apps.list.photo.splice(idx,1 );
	    				}
	    			});
	    			
	    			//提交
	    			mui('#vueMain').on('tap', '.enter', function(){
					if( apps.list.score == 0 ){
						mui.toast("请为商品评一下分呗！");
						return ;
					}
					if( apps.list.content == '' ){
						mui.toast("请说明一下体会或感受");
						return ;
					}
					
					var send = apps.list;
					send['photo'] = apps.list.photo.join(',');
					bexta.ajax(api.add_comment, function(res, msg){
						mui.toast(msg);
						if( !res ){
							mui.fire(views.opener(), 'reloadOrder', {
								order_no:views.order_no
							});
							mui.back();
						}
					}, {data:send});
	    			});
	    			//诺名：
	    			mui('#vueMain').on('tap', '.mui-checkbox', function(){
	    				apps.list.is_name = apps.list.is_name==2?1:2;
	    			});
	    			//评星
				mui('.score_star').score({
					fullStar:"../icon/pull-xin-icon@2x.png", 
					voidStar:"../icon/null-xin-icon@2x.png",
					success:function(el){
						var name = el.getAttribute('data-name'),
							count = el.getAttribute('data-count');
						apps.list[name] = count;
					}
				});
				//图片处理
				mui('#shee').on('tap', '.shee', function(){
					mui('#sheet1').popover('toggle');
				});
				//相机
				mui('#sheet1').on('tap', '.callCamera', function() {
					var self = this;
					bexta.camera(function(entry){
						bexta.uploadImage(function(res){
							jres = JSON.parse(res);
							if( jres.code == 200 ){
								mui.toast('上传成功');
								apps.showimg.push(jres.body.true_url);
								apps.list.photo.push(jres.body.true_path);
							}
						}, [entry], {type:1}, true);
					},['480px', 'auto']); 
					mui('#sheet1').popover('toggle');
				});
				//相册
				mui('#sheet1').on('tap', '.callalbum', function() {
					bexta.gallery(function(files){
						bexta.uploadImage(function(res){
							jres = JSON.parse(res);
							if( jres.code == 200 ){
								mui.toast('上传成功');
								bexta.jsonToString(jres);
								apps.showimg.push(jres.body.true_url);
								apps.list.photo.push(jres.body.true_path);
							}
						}, [files], {type:1}, true); 
					}, ['480px', 'auto']);  
					mui('#sheet1').popover('toggle');
				});
				
	    		}
	    });
	})
	
</script>
</body>
</html>